<!--
 * 添加、编辑快速命令
 *
 * @author Junpeng.Li
 * @date 2022-04-11 11:18
 *
 * 自定义事件：
 *   - confirm(): 点击对话框中【确定】按钮时的回调函数
-->
<template>
    <el-dialog
        title="编辑命令"
        :visible.sync="visible"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="600px"
    >
        <el-form ref="form" :model="data" :rules="rules">
            <el-form-item label="名称：" prop="name">
                <el-input v-model="data.name"/>
            </el-form-item>
            <el-form-item label="命令：">
                <el-input v-model="data.command"
                          type="textarea"
                          :rows="5"
                          resize="none"
                />
            </el-form-item>
        </el-form>

        <!--<p style="font-size: 14px;color: #909399;">
            转义字符：\r \n: new line, \t: tab, \a: bell, \b: backspace
        </p>-->

        <div slot="footer">
            <el-button type="primary" @click="onSave">确 定</el-button>
            <el-button @click="onCancel">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>

    import {addCmd, editCmd} from '@/api/fast-cmd.api'

    export default {
        name: "data-form",
        data() {
            return {
                visible: false,

                data: {},

                rules: {
                    name: [
                        {required: true, trigger: 'blur', message: '请输入名称'},
                        {min: 1, max: 20, trigger: 'blur', message: '长度为 1 ~ 20 个字符'}
                    ]
                }
            }
        },

        methods: {

            open(data = {}) {
                this.visible = true
                this.data = JSON.parse(JSON.stringify(data))
            },

            onSave() {
                this.$refs.form.validate(isValid => {
                    if (!isValid) {
                        return
                    }

                    if (this.data.id) {
                        editCmd(this.data)
                    } else {
                        addCmd(this.data)
                    }

                    this.$emit('confirm')
                    this.visible = false
                })
            },

            onCancel() {
                this.visible = false
            }

        }
    }
</script>

<style scoped>

</style>
